<template>
	<div class="wechat-login-container">
		<div class="qr-code-wrapper">
			<div v-if="!state.qrCode" class="loading-qr">
				<el-icon class="is-loading">
					<Loading />
				</el-icon>
				<span>正在加载二维码...</span>
			</div>
			<img v-else :src="state.qrCode" alt="微信登录二维码" class="qr-code" />
			<div class="qr-overlay" v-if="state.isExpired">
				<div class="expired-content">
					<span>二维码已过期</span>
					<el-button type="primary" size="small" @click="getQRCode">点击刷新</el-button>
				</div>
			</div>
		</div>
		<div class="tip-section">
			<p class="main-tip">请使用微信扫描二维码登录</p>
			<p class="sub-tip">在确保账号安全的情况下，请勿扫描来源不明的二维码</p>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginWechat">
import { reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue';
import { Loading } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

import { useLogin } from '/@/hooks/useLogin';

const ci = getCurrentInstance() as any;

// 定义事件
const emit = defineEmits(['loading-change']);

// 定义变量内容

const { handleLoginSuccess } = useLogin(ci);

const state = reactive({
	qrCode: '',
	polling: null as NodeJS.Timeout | null,
	isExpired: false,
	expirationTimer: null as NodeJS.Timeout | null,
});

// 获取二维码
const getQRCode = async () => {
	state.isExpired = false;
	try {
		// const res = await loginApi.getWechatQRCode();
		// qrCodeUrl.value = res.qrCodeUrl;
		// sceneStr.value = res.sceneStr;
		startCheckingLogin();

		// 设置二维码过期时间（2分钟）
		if (state.expirationTimer) {
			clearTimeout(state.expirationTimer);
			state.expirationTimer = null;
		}
		state.expirationTimer = setTimeout(() => {
			state.isExpired = true;
			if (state.polling) {
				clearInterval(state.polling);
				state.polling = null;
			}
		}, 120000) as unknown as NodeJS.Timeout;
	} catch (error) {
		console.error('获取二维码失败:', error);
		ElMessage.error('获取二维码失败，请刷新页面重试');
	}
};

// 开始检查登录状态
const startCheckingLogin = () => {
	if (state.polling) {
		clearInterval(state.polling);
		state.polling = null;
	}
	state.polling = setInterval(async () => {
		if (state.isExpired) {
			if (state.polling) {
				clearInterval(state.polling);
				state.polling = null;
			}
			return;
		}
		try {
			// const res = await loginApi.checkWechatLogin(sceneStr.value);
			const res = {
				isScanned: true,
				isLoggedIn: true,
				token: 'test-token',
			};
			if (res.isScanned) {
				if (res.isLoggedIn) {
					if (state.polling) {
						clearInterval(state.polling);
						state.polling = null;
					}
					await handleLoginSuccess(res.token, emit);
				}
			}
		} catch (error) {
			console.error('检查登录状态失败:', error);
		}
	}, 2000) as unknown as NodeJS.Timeout;
};

onMounted(() => {
	getQRCode();
});

onUnmounted(() => {
	if (state.polling) {
		clearInterval(state.polling);
	}
	if (state.expirationTimer) {
		clearTimeout(state.expirationTimer);
	}
});
</script>

<style lang="scss" scoped>
.wechat-login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 20px;
	animation: fadeIn 0.5s ease;

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

.qr-code-wrapper {
	position: relative;
	width: 220px;
	height: 220px;
	background: #fff;
	border-radius: 12px;
	padding: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	margin-bottom: 24px;

	.loading-qr {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		color: var(--el-text-color-secondary);

		.el-icon {
			font-size: 32px;
			color: var(--el-color-primary);
		}

		span {
			font-size: 14px;
		}
	}

	.qr-code {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: 8px;
	}

	.qr-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.95);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12px;

		.expired-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 12px;

			span {
				color: var(--el-text-color-secondary);
				font-size: 14px;
			}

			.el-button {
				padding: 8px 16px;
			}
		}
	}
}

.tip-section {
	text-align: center;

	.main-tip {
		color: var(--el-text-color-primary);
		font-size: 16px;
		margin: 0 0 8px;
	}

	.sub-tip {
		color: var(--el-text-color-secondary);
		font-size: 12px;
		margin: 0;
	}
}
</style>
